<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            /* 这个必须设置不然没有效果 设置在父元素里 设置在爷爷元素里没效果*/
           perspective: 500px;
        }
        .div1{
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 50px auto;
            transition: all .6s;
            /* 2d旋转 平面旋转 */
            /* transform: rotate(40deg);
            等价于 transform: rotateZ(40deg); 
            z轴旋转相当于2d旋转*/

            /* 3d旋转 */
            /* x轴旋转 正数就是往后到  负数就是往前扑 */
            transform: rotateX(-45deg);
        }
        .div2{
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            transition: all .6s;
            /* 3d旋转 */
            /*Y轴旋转 正数就是往右转  负数往左转*/
            transform: rotateY(80deg);
           
        }
        .div3{
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            transition: all .6s;
           /* 简写 */
           /* transform: rotate3d(x,y,z,deg); */
           /* 相当于x轴旋转45度 */
           /* transform: rotate3d(1,0,0,45deg); */
            /* 相当于y轴旋转45度 */
          /* transform: rotate3d(0,1,0,45deg); */
            /* 相当于z轴旋转45度  */
           /* transform: rotate3d(0,0,1,45deg); */
           transform: rotate3d(1,1,0,45deg);

        }
        img{
            width: 100%;
            height: 100%;
        }
       
    </style>
</head>
<body>
    <div class="div1">
        <img src="/pink/imgs/04.png" alt="">
    </div>
    <div class="div2">
        <img src="/pink/imgs/04.png" alt="">
    </div>
    <div class="div3">
        <img src="/pink/imgs/04.png" alt="">
    </div>
</body>
</html>